<template>
    <FpiElPageLayout title="SVG使用方式">
        <el-scrollbar style="height: 100%">
            <div class="content">
                <ul class="svg-container">
                    <li class="svg-item" :key="item.name" v-for="item in iconNameList">
                        <SvgIcon color="red" size="30px" :name="item.name"></SvgIcon
                        ><span>{{ item.show1 }}</span
                        ><span>{{ item.show2 }}</span>
                    </li>
                </ul>
            </div>
        </el-scrollbar>
    </FpiElPageLayout>
</template>

<script setup lang="ts">
import { FpiElPageLayout } from '@ued_fpi/element-plus-expand'

const files = import.meta.glob('../../components/SvgIcon/icons/*.svg')
const iconNameList = Object.keys(files).map((item: string) => {
    const name = item.replace('../../components/SvgIcon/icons/', '').replace('.svg', '')
    return {
        name,
        show1: `SvgIcon(name="${name}" size="30px")`,
        show2: `<SvgIcon name="${name}" size="30px"></SvgIcon>`,
    }
})
</script>

<style lang="scss" scoped>
.content {
    margin: 0 auto;
}

.svg-container {
    display: flex;
    flex-wrap: wrap;
}

.svg-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 460px;
    height: 160px;
    margin: 16px;
    border: 1px solid #333;
    border-radius: 8px;

    > span {
        margin-top: 10px;
    }
}
</style>
